<template>
    <div class="personal-info">
      <el-card class="box-card">
        <template #header>
          <div class="clearfix">
            <span>个人信息</span>
          </div>
        </template>
        <el-form ref="infoForm" :model="userInfo" :rules="rules" label-width="120px">
          <el-form-item label="头像" prop="tx">
            <div class="avatar-container">
              <el-avatar :src="userInfo.tx || defaultAvatar" size="large"></el-avatar>
              <el-button type="primary" @click="uploadAvatar" style="margin-left: 10px;">上传头像</el-button>
              <input ref="avatarInput" type="file" accept="image/*" style="display: none;" @change="handleAvatarChange">
            </div>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userInfo.username" placeholder="请输入用户名" maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userInfo.password" type="password" placeholder="请输入密码" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="userInfo.name" placeholder="请输入姓名" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="地区" prop="region">
            <el-input v-model="userInfo.region" placeholder="请输入地区" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="intro">
            <el-input v-model="userInfo.intro" placeholder="请输入简介" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="userInfo.tel" placeholder="请输入手机号" maxlength="11" show-word-limit></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { put } from '@/http/http';
  
  export default {
    name: 'PersonalInfo',
    mounted(){
      this.userInfo = JSON.parse(sessionStorage.getItem('consultant'));
    },
    setup() {
      const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64360288247c8d4721eapng.png' // 默认头像
      const userInfo = ref({
        id: 0,
        username: '',
        password: '',
        tx: '',
        tel: ''
      })
  
      const rules = {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
        ]
      }
  
      const infoForm = ref(null)
  
      const submitForm =  () => {
  
        infoForm.value.validate(async (valid) => {
          if (valid) {
            // 这里添加保存用户信息的逻辑
            await put(`/hqy/consultant/${userInfo.value.id}`, userInfo.value);
            alert('保存成功');
          } else {
            ElMessage.error('表单验证失败')
            return false
          }
        })
      }
  
      const resetForm = () => {
        infoForm.value.resetFields()
      }
  
      const uploadAvatar = () => {
        // 在 setup 中不能使用 this，直接使用 ref
        avatarInput.value.click()
      }
  
      const avatarInput = ref(null)
  
      const handleAvatarChange = (e) => {
        const file = e.target.files[0]
        if (file) {
          const reader = new FileReader()
          reader.onload = (event) => {
            userInfo.value.tx = event.target.result
          }
          reader.readAsDataURL(file)
        }
      }
  
      return {
        defaultAvatar,
        userInfo,
        rules,
        infoForm,
        avatarInput,
        submitForm,
        resetForm,
        uploadAvatar,
        handleAvatarChange
      }
    }
  }
  </script>
  
  <style scoped>
  .avatar-container {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
  }
  
  .box-card {
    margin-top: 20px;
  }
  </style>